<template>
  <div class="app-container bg-white">
    <!-- 页面内容 -->
    <div class="page-body">
      <div>
        <el-button type="success" icon="el-icon-document-add" size="mini" @click="addOrEditOption(1, '')" v-if="roleBtns.includes('sys:goods_price:save') || $store.getters.isAdmin">新建模板</el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeSelectOption()" v-if="roleBtns.includes('sys:goods_price:remove') || $store.getters.isAdmin">批量删除</el-button>
      </div>
      <el-table class="margin_top_20" :data="pageData" stripe @selection-change="handleSelectionChange" :header-cell-style="tableHeaderStyle" v-loading="loading">
        <el-table-column type="selection" width="42"></el-table-column>
        <el-table-column prop="name" label="模板名称"></el-table-column>
        <el-table-column prop="creatorName" label="创建人"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="status" label="启用/禁用">
          <template slot-scope="scope">
            <el-switch @change="changePriceStatus(scope.row, scope.$index)" :value="scope.row.statusBoolean" :disabled="!(roleBtns.includes('sys:goods_price:save') || $store.getters.isAdmin)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <button class="my-btn my-btn--mini my-btn--primary plain" @click="addOrEditOption(2, scope.row)" v-if="roleBtns.includes('sys:goods_price:save') || $store.getters.isAdmin">编辑</button>
            <button class="my-btn my-btn--mini my-btn--danger plain" @click="deleteOption(scope.row.id)" v-if="roleBtns.includes('sys:goods_price:remove') || $store.getters.isAdmin">删除</button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页面页脚 -->
    <div class="text-center">
      <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :layout="paginationLayout" :total="pageCount"> </el-pagination>
    </div>

    <price-form :visible.sync="isShowModel" :title="title" :price="selectPrice" @update="getPageDataList()"></price-form>
  </div>
</template>

<script>
import Setting from '@/settings'
import { mapGetters } from 'vuex'
import PriceForm from '@/views/store-management/components/priceListForm'
import { GetPriceList, RemovePriceList, ChangeStorePriceItemStatus } from '@/views/store-management/services/index'

export default {
  name: 'StorePrice',
  components: {
    PriceForm,
  },
  data() {
    return {
      queryName: '',
      pageIndex: 1,
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      pageData: [],
      selectPrice: '',
      multipleSelection: [],
      multipleSelectionIds: '',
      pageCount: 0,
      loading: false,
      isShowModel: false,
      isEditMode: false,
      imgBaseUrl: `${process.env.VUE_APP_FILE_URL}/`,
    }
  },
  computed: {
    ...mapGetters(['roleBtns']),
    title() {
      if (!this.isEditMode) {
        return '新建价格模板'
      } else {
        return '编辑价格模板'
      }
    },
  },
  created() {
    this.getPageDataList()
  },
  methods: {
    // 新增和编辑按钮
    addOrEditOption(type, row) {
      if (type === 1) {
        this.isShowModel = true
        this.isEditMode = false
        this.selectPrice = ''
      } else {
        this.isShowModel = true
        this.isEditMode = true
        this.selectPrice = row
        // this.renderFormByData(row);
      }
    },
    // 修改模板启用状态
    changePriceStatus(row, index) {
      row.status = Number(row.status) == 0 ? 1 : 0
      ChangeStorePriceItemStatus({
        id: row.id,
        status: row.status,
      })
        .then(data => {
          if (data.code == 200) {
            // this.$set(this.pageData, index, row);
            this.$message.success('修改成功!')
            row.statusBoolean = !row.statusBoolean
          } else {
            this.$message({
              type: 'error',
              message: '修改失败!',
            })
          }
        })
        .catch(error => {
          this.$message({
            type: 'error',
            message: '修改失败!',
          })
        })
    },

    // 单行删除操作
    deleteOption(rowId) {
      this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '加载中...'
            RemovePriceList({ targetIds: rowId })
              .then(data => {
                instance.confirmButtonLoading = false
                if (data.code == 200) {
                  done()
                  this.$message.success('删除成功!')
                  this.getPageDataList()
                } else {
                  this.$message.error('删除失败!')
                }
              })
              .catch(error => {
                instance.confirmButtonLoading = false
              })
            done()
          } else {
            done()
          }
        },
      })
    },
    //批量删除操作
    removeSelectOption() {
      if (!this.multipleSelection || !this.multipleSelection.length) {
        this.$message.warning('请选择需要删除的价格模板!')
        return
      }
      this.$confirm('是否确认要移除所选中的价格模板，移除后此价格模板不在列表中显示?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '加载中...'
            RemovePriceList({ targetIds: this.multipleSelectionIds.join(',') })
              .then(data => {
                instance.confirmButtonLoading = false
                if (data.code == 200) {
                  done()
                  this.$message.success('删除成功!')
                  this.getPageDataList()
                } else {
                  this.$message.error('删除失败!')
                }
              })
              .catch(error => {
                instance.confirmButtonLoading = false
              })
          } else {
            done()
          }
        },
      })
    },
    // 重置操作
    resetOption() {
      this.queryName = ''
      this.pageIndex = 1
      this.getPageDataList()
    },

    // 获取页面列表数据
    getPageDataList() {
      this.loading = true
      GetPriceList({
        pageSize: this.pageSize,
        pageNum: this.pageIndex,
      })
        .then(data => {
          if (data.code == 200) {
            this.pageData = data.data.list.map(item => {
              item.statusBoolean = !!item.status
              return item
            })
            this.pageCount = data.data.total
          }
          setTimeout(() => {
            this.loading = false
          }, 300)
        })
        .catch(error => {
          this.loading = false
        })
    },

    // 分页列表改变
    handlePagingChange(event) {
      this.pageIndex = event
      this.getPageDataList()
    },
    handleSizeChange(event) {
      this.pageIndex = 1
      this.pageSize = event
      this.getPageDataList()
    },

    //选择列表中的某些项
    handleSelectionChange(event) {
      this.multipleSelection = event
      this.multipleSelectionIds = this.multipleSelection.map(aa => {
        return aa.id
      })
    },
  },
}
</script>
